﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--========== The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags ==========-->
    <title>Blog</title>

    <!--==========Dependency============-->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/vendors/owl-carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="/static/vendors/magnific-popup/magnific-popup.css">
    <link rel="stylesheet" href="/static/vendors/flexslider/flexslider.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link href="/static/common/editor/css/editormd.css" rel="stylesheet"/>

    <link href="/static/common/github-markdown-css-gh-pages/github-markdown.css"/>
    <!--    <link href="/static/common/testMakedown1.css" rel="stylesheet"/>-->
    <link rel="stylesheet" href="/static/css/familyKanit.css">
    <link rel="stylesheet" href="/static/css/familyJosefinSans.css">
    <link href='/static/css/familyDosis.css' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/static/css/familyMuli.css">
    <link href='/static/css/familyRoboto.css' rel='stylesheet' type='text/css'>

    <link href='/static/css/familyMonserrat.css' rel='stylesheet' type='text/css'>
    <link href='/static/css/familyFredokaOne.css' rel='stylesheet' type='text/css'>

    <!--==========Theme Styles==========-->
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/theme/green.css" rel="stylesheet">

    <!--========== HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries ==========-->
    <!--========== WARNING: Respond.js doesn't work if you view the page via file:// ==========-->
    <!--==========[if lt IE 9]>


    <![endif]==========-->
    <style>
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 980px;
            margin: 0 auto;
            padding: 45px;
        }

        @media (max-width: 767px) {
            .markdown-body {
                padding: 15px;
            }
        }

        .emoji {
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body class="home">
<script type="text/javascript" src="/static/js/jquery2.2.4.js"></script>
<script type="text/javascript" src="/static/common/showdown-master/dist/showdown.js"></script>
<script src="/static/js/html5shiv.min.js"></script>
<script src="/static/js/respond.min.js"></script>
<script type="text/javascript" src="/static/common/editor/editormd.min.js"></script>
<script src="/static/common/editor/lib/marked.min.js"></script>
<script src="/static/common/editor/lib/prettify.min.js"></script>
<header class="row transparent white" data-spy="affix" data-offset-top="300" id="header">
    <div class="container">
        <div class="row top-header">
            <div class="col-sm-4 search-form-col">
                <form action="#" method="get" class="search-form">
                    <div class="input-group">
                        <span class="input-group-addon"><img src="/static/images/search-icon-dark.png" alt=""></span>
                        <input type="search" class="form-control" placeholder="search">
                    </div>
                </form>
            </div>
            <div class="col-sm-4 logo-col text-center">
                <a href="myindex.html"><img src="/static/images/logo-black-green.png" alt=""></a>
            </div>
            <div class="col-sm-4 menu-trigger-col">
                <button class="menu-trigger black pull-right">
                    <span class="active-page">Blog Details</span>
                    <img src="/static/images/menu-align-dark.png" alt="" class="icon-burger">
                    <img src="/static/images/menu-close-dark.png" alt="" class="icon-cross">
                </button>
            </div>
        </div>
    </div>
    <div class="row menu-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 menu-col">
                    <div class="row">
                        <ul class="nav column-menu white-bg">
                            <li class="active dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">Home <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="index.html">Home Option 1</a></li>
                                    <li><a href="index2.html">Home Option 2</a></li>
                                    <li><a href="index3.html">Home Option 3</a></li>
                                    <li><a href="index4.html">Home Option 4</a></li>
                                    <li><a href="index5.html">Home Option 5</a></li>
                                    <li><a href="index6.html">Home Option 6</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="single.html">Blog Single 1</a></li>
                            <li><a href="single2.html">Blog Single 2</a></li>
                        </ul>
                        <ul class="nav column-menu white-bg">
                            <li><a href="single3.html">Blog Single 3</a></li>

                            <li><a href="contact.html">contact</a></li>
                        </ul>
                    </div>
                </div>
                <!--                <div class="col-sm-4 subscribe-col">-->
                <!--                    <h5 class="widget-title">subscribe to our newsletter.</h5>-->
                <!--                    <form action="#" method="post" class="form-inline subscribe-form">-->
                <!--                        <div class="form-group">-->
                <!--                            <input type="email" class="form-control" placeholder="Email">-->
                <!--                        </div>-->
                <!--                        <button type="submit" class="btn btn-primary btn-sm"><span>send</span></button>-->
                <!--                    </form>-->
                <!--                    <ul class="nav social-nav white">-->
                <!--                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>-->
                <!--                        <li><a href="#"><i class="fa fa-facebook-official"></i></a></li>-->
                <!--                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>-->
                <!--                        <li><a href="#"><i class="fa fa-instagram"></i></a></li>-->
                <!--                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>-->
                <!--                    </ul>-->
                <!--                </div>-->
            </div>
        </div>
    </div>
</header>

<section class="row content-wrap">
    <div class="container">
        <div class="row">

            <div class="col-md-8 single-post-contents">
                <!--                aaaaa single-post-content row m0 post -->
                <article class="single-post-content row m0 post  markdown-body">
                    <header class="row">
                        <h5 class="post-meta">
                            <a href="#" class="date" id="post_data"></a>
                            <span class="post-author"><i>by</i><a href="#" id="author">TriggerWu</a></span>
                        </h5>
                        <!--标题 -->
                        <h2 class="post-title" id="po_title"></h2>
                        <div class="row">
                            <!--分类 -->
                            <h5 class="taxonomy pull-left" id="category"><i>in</i> <a href="#" id="category_desc">1111image</a>
                            </h5>
                            <!--回复数量 -->
                            <div class="response-count pull-right" id="commentsNum"><img src="/static/images/comment-icon-gray.png" alt="">
                            </div>
                        </div>
                    </header>
                    <!-- 配图 /static/images/posts/6.jpg-->
                    <div class="featured-content row m0">
                        <a href="javascript:;"><img id="post_img" src="" alt=""></a>
                    </div>
                    <!--                    <textarea id="contentMD" style="height:400px;width:600px;"></textarea>-->
                    <!--文章内容 -->
                    <div class="post-content row" id="content">
                    </div>
                    <!--存放标签 -->
                    <div class="row m0 tags" id="tags">
                        <a href="#" class="tag">music</a>
                        <a href="#" class="tag">tegs</a>
                        <a href="#" class="tag">tegs hover</a>
                    </div>
                </article>
                </br>
                </br>

                <h5 class="response-count">
                    <a href="javascript:;" id="comment_form"
                       class="btn btn-primary pull-right"><span>加入讨论</span></a>
                </h5>
                </br>
                </br>
                <div id="loadPage"></div>
                <article class="single-post-content row m0 post ">
                    <!--上下篇博客 -->
                    <!--                    <ul class="pager">-->
                    <!--                        <li>-->
                    <!--                            <h4>Previous Articles</h4>-->
                    <!--                            <h2 class="post-title"><a href="single2.html">Nature, in the broadest sense, is the-->
                    <!--                                natural...</a></h2>-->
                    <!--                            <h5 class="taxonomy pull-left"><i>in</i> <a href="#">image</a>, <a-->
                    <!--                                    href="#">entertainment</a></h5>-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <h4>Next Articles</h4>-->
                    <!--                            <h2 class="post-title"><a href="single2.html">Nature, in the broadest sense, is the-->
                    <!--                                natural...</a></h2>-->
                    <!--                            <h5 class="taxonomy pull-left"><i>in</i> <a href="#">image</a>, <a-->
                    <!--                                    href="#">entertainment</a></h5>-->
                    <!--                        </li>-->
                    <!--                    </ul>-->
                    <!--                    <div id="hide_lable" class="row m0 tags"><h5 class="response-count"><a href="javascript:;"-->
                    <!--                                                                                           class="btn btn-primary pull-left"-->
                    <!--                                                                                           id="dohide"><span>查看回复</span></a>-->
                    <!--                    </h5></div>-->

                    <div class="row m0 comments" id="showComment">

                        <!--                        &lt;!&ndash;回复讨论&ndash;&gt;-->
                        <!--                        <div class="media comment" >-->

                        <!--                            <div class="media-left">-->
                        <!--                                <a href="#"><img src="/static/images/posts/c1.jpg" style="width: 50px;height: 50px;"-->
                        <!--                                                 alt="" class="img-circle"></a>-->
                        <!--                            </div>-->
                        <!--                            <div class="media-body">-->
                        <!--                                <h4><a href="#">test1</a></h4>-->
                        <!--                                <h5><a href="#" class="date">9102/1/1</a> | <a href="#"-->
                        <!--                                                                               class="reply-link">reply</a>-->
                        <!--                                </h5>-->
                        <!--                                <p>测试回复1</p>-->
                        <!--                                &lt;!&ndash;Comments&ndash;&gt;-->
                        <!--                                <div class="media comment reply">-->
                        <!--                                    <div class="media-left">-->
                        <!--                                        <a href="#"><img src="/static/images/posts/c2.jpg" alt="" class="img-circle"></a>-->
                        <!--                                    </div>-->
                        <!--                                    <div class="media-body">-->
                        <!--                                        <h4><a href="#">test2</a></h4>-->
                        <!--                                        <h5><a href="#" class="date">9102/1/1</a> | <a href="#" class="reply-link">reply</a></h5>-->
                        <!--                                        <p>测试回复2</p>-->

                        <!--                                    </div>-->
                        <!--                                </div>-->
                        <!--                            </div>-->

                        <!--                            &lt;!&ndash;Comments start&ndash;&gt;-->
                        <!--                            <div class="media comment">-->
                        <!--                                <div class="media-left">-->
                        <!--                                    <a href="#"><img src="/static/images/posts/c1.jpg" alt="" class="img-circle"></a>-->
                        <!--                                </div>-->
                        <!--                                <div class="media-body">-->
                        <!--                                    <h4><a href="#">Mark Sanders</a></h4>-->
                        <!--                                    <h5><a href="#" class="date">feb 17, 2016 at 3:30pm</a> | <a href="#" class="reply-link">reply</a>-->
                        <!--                                    </h5>-->
                        <!--                                    <p> unchanged.</p>-->
                        <!--                                </div>-->
                        <!--                            </div>-->
                        <!--                            &lt;!&ndash;Comments end&ndash;&gt;-->
                        <!--                        </div>-->

                    </div>

                    <div id="comment_post" style="display: none">
                        <form action="#" method="post" class="comment-form row" id="comment-form">
                            <h5 class="form-title">留言评论</h5>
                            <div class="col-sm-12">
                                <h5 class="pull-left">*ReplyTo</h5>
                                <input type="text" id="reply_po" class="layui-input" style="width: 30%;"/>

                            </div>
                            <div class="form-group col-sm-6">
                                <label for="pic">头像</label>
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn layui-btn-radius layui-btn-primary "
                                            id="imgupload">上传图片
                                    </button>
                                    <div class="layui-upload-list">
                                        <img class="layui-upload-img img-circle" style="width: 50px;height: 50px;"
                                             id="pic" src="http://oss.6ack.com/2019051014292432966963.jpg">
                                        <p id="demoText">http://oss.6ack.com/2019051014292432966963.jpg</p>
                                    </div>
                                </div>
                                <label for="name">回复者</label>
                                <input type="text" id="name" class="form-control" placeholder="填写名称" required
                                       value="匿名者孙笑川">
                            </div>
                            <div class="form-group col-sm-6">

                            </div>
                            <!--         editor-->
                            <div class="layui-form-item">
                                <div id="content-editormd" class="form-group">
                                <textarea style="" class="form-control" id="content-editormd-markdown-doc"
                                          name="content-editormd-markdown-doc"></textarea>
                                </div>
                            </div>
                            <!--editor  end-->
                            <div class="col-sm-12">
                                <button type="button" id="cms_sub" class="btn-primary"><span>发送</span></button>
                                <h5 class="pull-right">*默认匿名回复</h5>
                            </div>
                        </form>
                    </div>
                </article>
            </div>
            <!-- 作者栏 放这里显示右边  放上面显示左边-->
            <div class="col-md-4 sidebar">
                <!--Author Widget-->
                <aside class="row m0 widget-author widget">
                    <div class="widget-author-inner row">
                        <div class="author-avatar row"><a href="#"><img src="/static/images/fuckerPanda.jpg" alt=""
                                                                        class="img-circle"
                                                                        style="width: 100px;height: 100px"></a></div>
                        <a href="javaScript:;"><h2 class="author-name">Trigger Wu</h2></a>
                        <h5 class="author-title">码农</h5>
                        <p>写代码,玩自己</p>
                        <a href="#" class="know-more">查看详情</a>
                    </div>
                    <ul class="nav social-nav">
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook-official"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                    </ul>
                </aside>
                <!--Twitter 广告栏-->
                <!--                <aside class="row m0 widget widget-twitter">-->
                <!--                    <div class="widget-twitter-inner">-->
                <!--                        <h5 class="widget-meta"><i class="fa fa-twitter"></i>Twitter feed <a-->
                <!--                                href="http://twitter.com/chivalricblog">@chivalricblog</a></h5>-->
                <!--                        <div class="row tweet-texts">-->
                <!--                            <p>Check out new post on my blog <a href="http://twitter.com/#natureshot">#natureshot</a> <a-->
                <!--                                    href="http://bit.ly/blog">http://bit.ly/blog</a></p>-->
                <!--                        </div>-->
                <!--                        <div class="row timepast">1 day ago</div>-->
                <!--                    </div>-->
                <!--                </aside>-->
                <!--Instagram 广告栏-->
                <!--                <aside class="row m0 widget widget-instagram">-->
                <!--                    <div class="widget-instagram-inner">-->
                <!--                        <h5 class="widget-meta"><i class="fa fa-twitter"></i>instagram feed <a-->
                <!--                                href="http://twitter.com/chivalricblog">@chivalricblog</a></h5>-->
                <!--                        <div id="instafeed"></div>-->
                <!--                    </div>-->
                <!--                </aside>-->
            </div>
        </div>
    </div>
</section>

<!--Footer-->
<footer class="row" id="footer">
    <div class="container">
        <div class="row top-footer">
            <div class="widget col-sm-3 widget-about">
                <div class="row m0"><a href="index.html"><img src="/static/images/logo-black-green.png" alt=""></a>
                </div>
            </div>
            <div class="widget col-sm-5 widget-menu">
                <div class="row">
                    <ul class="nav column-menu white-bg">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="single.html">Blog Single 1</a></li>
                        <li><a href="single2.html">Blog Single 2</a></li>
                    </ul>
                    <ul class="nav column-menu white-bg">
                        <li><a href="single3.html">Blog Single 3</a></li>

                        <li><a href="contact.html">contact</a></li>
                    </ul>
                </div>
            </div>
            <!--            <div class="widget col-sm-4 widget-subscribe">-->
            <!--                <h5 class="widget-title">subscribe to our newsletter.</h5>-->
            <!--                <form action="#" method="post" class="form-inline subscribe-form">-->
            <!--                    <div class="form-group">-->
            <!--                        <input type="email" class="form-control" placeholder="Email">-->
            <!--                    </div>-->
            <!--                    <button type="submit" class="btn btn-primary btn-sm"><span>send</span></button>-->
            <!--                </form>-->
            <!--            </div>-->
        </div>
        <!--        <h5 class="copyright">Copyright &copy; 2019 </h5>-->
    </div>
</footer>

<!--========== jQuery (necessary for Bootstrap's JavaScript plugins) ==========-->

<script type="text/javascript" src="/static/layui/layui.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="/static/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="/static/vendors/instafeed/instafeed.min.js"></script>
<script src="/static/vendors/imagesLoaded/imagesloaded.pkgd.min.js"></script>
<script src="/static/vendors/isotope/isotope.pkgd.min.js"></script>
<script src="/static/js/theme.js"></script>
<script src="/static/vendors/flexslider/jquery.flexslider-min.js"></script>
<script src="/static/js/blog/webBlog.js"></script>

</body>
</html>
